<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>task1</title>
        <style type="text/css">
        .box{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width:60%;
            padding-left: 20%;
            height: 300px;
            
        }
        .box div{
           position: relative;
           
            
        }
        .box img{
            max-width: 100%;
            max-height: 150px;
            border:5px;
            padding:5px;
            position: relative;
            
           
            
        }
        .text{
            position: absolute;
            left: 20px;
            margin-top: -30px;
            color:rgb(89, 0, 255);
            
            
        }
        </style>
    </head>
    <body >
        <div class="box">
        <div >
            <img src="1.jpg"  alt="pic error">
            <p class="text">some simbol</p>
        </div>
        <div >
            <img src="2.jpg"alt="pic error">
            <p class="text">the crown</p>
        </div>
        <div >
            <img src="3.png"alt="pic error">
            <p class="text">xian art</p>
        </div>
        <div >
            <img src="4.jpg"alt="pic error">
            <p class="text">di yu hui juan</p>
        </div>
        <div >
            <img src="5.jpg"alt="pic error">
            <p class="text">di yu hui juan</p>
        </div>
        <div >
            <img src="6.jpg"alt="pic error">
            <p class="text">di yu hui juan</p>
        </div>
        <div >
            <img src="7.jpg"alt="pic error">
            <p class="text">di yu hui juan</p>
        </div>
        <div>
            <img src="8.jpg"alt="pic error">
            <p class="text">di yu hui juan</p>
        </div>
        
    </div>
        




<script type="text/javascript">

	





    </script>
</body>
</html>